<!--
 * @Description: 
 * @Author: wangqi
 * @Date: 2022-04-28 15:22:31
 * @LastEditTime: 2022-06-02 11:23:26
-->
<template>
  <div class="icon-wrap">
    <p>
      基础用法：
      <a-space>
        <home-outlined spin />
        <home-outlined spin />
      </a-space>
    </p>

    <p>
      多色图标：
      <a-space>
        <heart-two-tone two-tone-color="blue" spin />
        <heart-two-tone two-tone-color="blue" />
      </a-space>
    </p>

    <p>
      Iconfont.cn：
      <a-space>
        <template v-for="item in iconFontList" :key="item.type">
          <icon-font :type="item.type" />
        </template>
      </a-space>
    </p>

    <p>
      SvgIcon：
      <a-space>
        <template v-for="item in svgIconList" :key="item.name">
          <SvgIcon :name="item.name" :size="item.size" />
        </template>
      </a-space>
    </p>
  </div>
</template>

<script lang="ts" setup>
  import { HomeOutlined, HeartTwoTone } from '@ant-design/icons-vue';
  import { IconFont } from '@/components/basic/Iconfont/index';
  import { SvgIcon } from '@/components/basic/SvgIcon';

  defineOptions({
    name: 'IconWrap',
  });

  const iconFontList = [
    {
      type: 'icon-anna',
      size: '28',
    },
    {
      type: 'icon-07',
      size: '28',
    },
  ];

  const svgIconList = [
    {
      name: 'moon',
      size: '16',
    },
    {
      name: 'sun',
      size: '16',
    },
    {
      name: 'topmenu',
      size: '40',
    },
  ];
</script>

<style lang="less" scoped></style>
